<template>
  <div class="flowbox">
    <div class="flowbox-head">
      <h5>
        选择流程
        <i class="el-icon-close" style="float:right;" @click="close"></i>
      </h5>
    </div>
    <div class="flowbox-body">
      <el-form :model="formline">
        <el-form-item label="所属公司">
          <el-select style="width:calc(100% - 80px);" v-model="formline.compId">
            <el-option label="无" value></el-option>
            <!-- 循环所有角色 公司名称 公司ID -->
            <el-option
              v-for="(item,index) in compList"
              :key="index"
              :label="item.compName"
              :value="item.compId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属分类">
          <el-select style="width:calc(100% - 80px);" v-model="formline.flowType">
            <el-option label="无" value></el-option>
            <el-option label="人事审核" value="人事审核"></el-option>
            <el-option label="工作审核" value="工作审核"></el-option>
            <el-option label="项目审核" value="项目审核"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="search"><i class="el-icon-search"></i> 搜索</el-button>
        </el-form-item>
      </el-form>
      <el-row class="flow-list" :gutter="24">
        <el-col :span="12" v-for="(item, index) in flows" :key="index">
          <div class="flow-item" @click="goRouter(item)">
            <el-card shadow="hover">{{item.flowName}}</el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      compList: [],
      flows: [],
      cls: false,
      formline: {
        compId: '',
        flowType: ''
      }
    };
  },
  created () {
    // 获取所有公司数据
    this.getCompList();
    this.search();
  },
  methods: {
    goRouter (data) {
      this.$router.push({
        path: data.formRouter,
        query: {
          node: 0,
          datas: data
        }
      });
    },
    close () {
      this.$emit('cls', this.cls);
    },
    search: function () {
      let params = {
        compId: this.formline.compId === null ? '' : this.formline.compId,
        flowType: this.formline.flowType === null ? '' : this.formline.flowType
      };
      this.$http.raw('api/findAllFlow', params).then(res => {
        let {code, datas} = res;
        if (code === 0) {
          this.flows = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },
    // 获取所有公司数据
    getCompList: function () {
      this.$http.post('api/findAllCompNoPage').then(res => {
        let { code, datas } = res;
        if (code === 0) {
          this.compList = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
